<template>
  <div class="container">
    <!-- card 组件 -->
    <el-card
      class="box-card"
    >

      <!-- 布局组件 -->
      <el-row justify="space-between">

        <!-- 左边 -->
        <el-col :span="22">
          <div class="grid-content bg-purple">
            <span>
              <el-form :inline="true" :model="formData" class="demo-form-inline">
                <el-form-item label="学科名称">
                  <el-input v-model="formData.keyWords" placeholder="请输入学科名" />
                </el-form-item>

                <el-form-item v-loading="listLoading">
                  <el-button @click="clearBtn">清除</el-button>
                  <el-button type="primary" @click="searchBtn(formData.keyWords)">搜索</el-button>
                </el-form-item>
              </el-form>
            </span>
          </div>
        </el-col>

        <!-- 右边 -->
        <el-col :span="2">
          <div class="grid-content bg-purple-light">
            <!-- 按钮 -->
            <el-row>
              <el-button type="success" @click="addFn">
                <i class="el-icon-edit" />
                新增学科</el-button>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <!--警告提示栏  -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        show-icon
      />

      <!-- 表格 -->
      <el-table
        :data="subjectTable"
        style="width: 100%"
        class="subjectTable"
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="subjectName" label="学科名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" :formatter="formatter" />
        <el-table-column prop="twoLevelDirectory" label="二级目录" />
        <el-table-column prop="tags" label="标签" />
        <el-table-column prop="totals" label="题目数量" />
        <el-table-column label="操作" width="250">
          <template v-slot="scope">
            <el-button type="text" @click="$router.push(`/subjects/directorys/?id=${scope.row.id}&&name=${scope.row.subjectName}`)">学科分类</el-button>
            <el-button type="text" @click="$router.push(`/subjects/tags/?id=${scope.row.id}&&name=${scope.row.subjectName}`)">学科标签</el-button>
            <el-button type="text" @click="updateFn(scope.row.id)">修改</el-button>
            <el-button type="text" @click="deleteFn(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">

        <el-pagination
          :current-page="query.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.pageSize"
          background
          layout=" prev, pager, next, sizes,jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <el-dialog
        :title="isEdit?'编辑学科':'新增学科'"
        :visible.sync="showDialog"
        width="30%"
      >
        <SubjectsAdd v-if="showDialog" :id="id" :is-edit="isEdit" @close="onClose" @renderList="renderListFn" />
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
// 导入接口函数
import { list, remove } from '@/api/hmmm/subjects'
import SubjectsAdd from '@/module-hmmm/components/subjects-add'
import subjects from '@/module-hmmm/constant/subjects.js'
// import { createLogger } from 'vuex'
export default {
  name: 'Subjects',
  components: {
    SubjectsAdd
  },
  filters: {
    // 创建日期格式化
    formatTime(date) {
      var jsondate = new Date(date).toJSON()
      // const time =
      return new Date(new Date(jsondate) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
  },
  data() {
    return {
      listLoading: false,
      isEdit: false,
      id: 0,
      showDialog: false,
      query: {
        page: 1,
        pageSize: 10
      },
      subjectTable: [],
      total: 10,
      dialogVisible: false,
      formData: {
        subjectName: '',
        region: '',
        keyWords: ''
      }

    }
  },
  created() {
    this.getSubjectListFn()
  },

  methods: {
    // 搜索
    async searchBtn() {
      this.listLoading = true
      // this.query.page = 1
      const res = await list({ subjectName: this.formData.keyWords, page: this.query.page, pageSize: this.query.pageSize })
      console.log(res)

      this.subjectTable = res.data.items
      this.total = res.data.counts
      this.alertText = `共${this.total}条记录`
      this.listLoading = false
    },
    // 清除搜索
    clearBtn() {
      this.formData.keyWords = ''
      this.query.page = 1
      this.getSubjectListFn()
    },
    // 对前台是否显示形式格式化
    formatter(row, column, cellValue, index) {
      const obj = subjects.isFrontDisplay.find(item => item.id === Number(cellValue))
      return obj ? obj.value : '未知'
    },
    onClose() {
      this.showDialog = false
    },
    renderListFn() {
      this.isEdit = false
      this.getSubjectListFn()
      this.showDialog = false
    },
    // 增加
    addFn() {
      this.showDialog = true
      this.isEdit = false
    },
    // 编辑数据的回显
    async updateFn(id) {
      this.id = id
      this.isEdit = true
      this.showDialog = true
    },
    // 删除
    async deleteFn(id) {
      const confirmRes = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmRes === 'cancel') return this.$message('您取消了删除')
      // 调用接口，并传入 ID
      const res = await remove(id)
      // this.$message.success(res.message)
      if (res.status === 200) {
        this.$message.success('删除成功!')
      }
      this.getSubjectListFn()
    },

    async getSubjectListFn() {
      const res = await list(this.query)
      console.log(res)
      this.subjectTable = res.data.items
      this.total = res.data.counts
    },
    onSubmit() {
      console.log('submit!')
    },

    handleSizeChange(val) {
      this.query.pageSize = val
      this.getSubjectListFn()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.getSubjectListFn()
    }

  }
}
</script>

<style scoped lang="scss">
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    // background-color: #f9fafc;
  }

  .el-form-item{
display: inline-block;
  }

  .el-pagination {
    float: right;
}
  </style>
